<template>
  <div>
    <!-- 搜索框 -->
    <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" />
    <div class="main">
      <!-- 左侧 -->
      <div class="left">
        <van-sidebar v-model="activeKey" style="width: 100%">
          <van-sidebar-item
            v-for="(v, i) in category"
            :key="i"
            :title="v.cate_name"
            @click="cliack(i)"
          />
        </van-sidebar>
      </div>
      <!-- 右侧 -->
      <div class="right" id="alltop">
        <div
          v-for="(v, i) in category"
          :key="i"
          :id="'nove' + i"
          class="right_top"
        >
          <div class="name">
            <h2>{{ v.cate_name }}</h2>
          </div>
          <div class="dl">
            <div class="dd" v-for="(j, k) in v.children" :key="k">
              <div>
                <img :src="j.pic" alt="" width="100%" height="100%" />
              </div>
              <div>
                {{ j.cate_name }}
              </div>
            </div>
          </div>
        </div>
        <div class="blank"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { navigation } from "@/api/request";
export default {
  data() {
    return {
      category: [],
      activeKey: 0,
      topss: [],
      value: "",
    };
  },
  created() {
    navigation().then((res) => {
      this.category = res.data.data;
    });
  },
  methods: {
    onScroll(e) {
      let scrollItems = document.querySelectorAll(".right_top");
      for (let i = scrollItems.length - 1; i >= 0; i--) {
        // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
        let judge =
          e.target.scrollTop >=
          scrollItems[i].offsetTop - scrollItems[0].offsetTop;
        if (judge) {
          this.activeKey = i;
          break;
        }
      }
    },
    // 点击左侧右侧滚动
    cliack(index) {
      document
        .getElementById("nove" + index)
        .scrollIntoView({ behavior: "smooth" });
    },
  },
  mounted() {
    document
      .querySelector(".right")
      .addEventListener("scroll", this.onScroll, true);
  },
  // 静止的时候毁灭scroll事件
  destory() {
    document
      .querySelector(".right")
      .removeEventListener("scroll", this.onScroll);
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  // padding: 0;
  box-sizing: border-box;
}
.van-sidebar-item {
  height: 62px;
  text-align: center;
}
.van-search {
  height: 50px;
}
.main {
  width: 100%;
  height: 100%;
  display: flex;
  .left {
    width: 25%;
    height: 740px;
    overflow: scroll;
  }
  .right {
    width: 74%;
    height: 740px;
    overflow: scroll;
    margin-left: 1%;
    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }

    .dl {
      width: 100%;
      height: 100%;
      float: left;
      margin-top: 4%;
      .dd {
        width: 33%;
        float: left;
        text-align: center;
        margin-top: 4%;
      }
    }
  }
}
.name {
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 24px;
}
.blank {
  width: 100%;
  height: 340px;
  float: left;
}
</style>
